import { createElement, render, useState } from '../lib'
import './index.css'

function Counter (props) {
  let [count, setCount] = useState(1)

  function handleAdd(e) {
    setCount(++count)
  }

  function handleReduce() {
    setCount(--count)
  }

  return <div>
    <h3>{props.name}</h3>
    <div class="counter" >
      <button onClick={handleReduce}>reduce</button>
      <p class="text">{count}</p>
      <button onClick={handleAdd}>add</button>
    </div>
  </div>
}

function App() {
  return <div id="app" >
    <Counter name="counter1" />
    <Counter name="counter2" />
  </div>
}

render(<App />, document.body)
